<template>
  <el-main>
    <div class="head">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>分类参数</el-breadcrumb-item>
    </el-breadcrumb>
    </div>
    <el-alert title="注意:只允许为第三级分类设置参数" type="warning" />
    <el-row>
      <p>请选择商品分类</p>
      <el-cascader :options="state.options" :show-all-levels="false" :props="defaultCate" @change="cateChanged" v-model="state.selsect"/>
    </el-row>
    <el-tabs tab-position="top" style="height: 200px" @tab-click="handleClick" v-model="state.tabs">
    <el-tab-pane label="动态参数">
      <el-button @click="addAttrMony">设置动态参数</el-button>
      <el-table :data="state.tableData" style="width: 100%">
        <el-table-column type="expand">
          <template #default="props">
            <el-tag
              v-for="(tag,index) in props.row.attr_vals"
              :key="tag"
              closable
              :disable-transitions="false"
              @close="handleClose(props.row,index)"
            >
              {{ tag }}
            </el-tag>
            <el-input
              v-if="inputVisible"
              ref="saveTagInput"
              v-model="inputValue"
              class="input-new-tag"
              size="mini"
              @keyup.enter="handleInputConfirm(props.row)"
              @blur="handleInputConfirm(props.row)"
            >
            </el-input>
            <el-button v-else class="button-new-tag" size="small" @click="showInput(props.row)"
              >+ New Tag</el-button
            >
          </template>
        </el-table-column>
        <el-table-column label="属性名称" prop="attr_name" />
        <el-table-column label="操作"  >
          <template #default="props" >
            <el-button type="primary" icon="el-icon-edit" @click="editAttrMony(props.row)" ></el-button>
            <el-button type="primary" icon="el-icon-delete" @click="deleteAttr(props.row.cat_id,props.row.attr_id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-tab-pane>
    <el-tab-pane label="静态参数">
      <el-button @click="addAttrOnly">设置静态参数</el-button>
      <el-table :data="state.onlyTableData" style="width: 100%">
        <el-table-column prop="attr_name" label="属性名称" width="180" />
        <el-table-column prop="name" label="操作" width="180" >
          <template #default="props">
            <el-button type="primary" icon="el-icon-edit" @click="editAttrOnly(props.row)"></el-button>
            <el-button type="primary" icon="el-icon-delete" @click="deleteAttr(props.row.cat_id,props.row.attr_id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-tab-pane>

  </el-tabs>
   <el-dialog title="添加参数" v-model="state.addAttrMonydirlog" >
    <el-form :model="state.addAttrMonyFrom" ref="editUeserInfofrom" >
      <el-form-item label="说明"  >
        <el-input v-model="state.addAttrMonyFrom.shuoming" autocomplete="off" :disabled="true"></el-input>
      </el-form-item>
      
      <el-form-item label="参数"  prop="attr_vals"
      :rules="[{required:true,message:'请输入参数',trigger:'blur' }]">
        <el-input v-model="state.addAttrMonyFrom.attr_vals"  autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="属性名"  prop="attr_name"
      :rules="[{required:true,message:'请输入属性名',trigger:'blur' }]">
        <el-input v-model="state.addAttrMonyFrom.attr_name" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="state.addAttrMonydirlog = false">取消</el-button>
        <el-button type="primary" @click="addAttrMonyFn">确定</el-button
        >
      </span>
    </template>
  </el-dialog>
    <el-dialog title="添加参数" v-model="state.addAttrOnlydirlog" >
    <el-form :model="state.addAttrOnlyFrom" ref="editUeserInfofrom" >
      <el-form-item label="说明"  >
        <el-input v-model="state.addAttrOnlyFrom.shuoming" autocomplete="off" :disabled="true"></el-input>
      </el-form-item>
      
      <el-form-item label="属性名"  prop="attr_name"
      :rules="[{required:true,message:'请输入属性名',trigger:'blur' }]">
        <el-input v-model="state.addAttrOnlyFrom.attr_name" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="state.addAttrOnlydirlog = false">取消</el-button>
        <el-button type="primary" @click="addAttrOnlyFn">确定</el-button
        >
      </span>
    </template>
  </el-dialog>
    <el-dialog title="编辑参数" v-model="state.editAttrMonydirlog" >
    <el-form :model="state.editAttrMonyFrom" :label-width="state.formLabelWidth" ref="editAttrMonyFrom" >
      <el-form-item label="说明"  >
        <el-input v-model="state.editAttrMonyFrom.shuoming" autocomplete="off" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="参数" :label-width="state.formLabelWidth" prop="attr_vals"
        :rules="[{required:true,message:'请输入参数',trigger:'blur' }]">
          <el-input v-model="state.editAttrMonyFrom.attr_vals"  autocomplete="off"></el-input>
        </el-form-item>
      <el-form-item label="属性名"  prop="attr_name" :label-width="state.formLabelWidth"
      :rules="[{required:true,message:'请输入属性名',trigger:'blur' }]">
        <el-input v-model="state.editAttrMonyFrom.attr_name" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="state.editAttrMonydirlog = false">取消</el-button>
        <el-button type="primary" @click="editAttrMonyFn">确定</el-button
        >
      </span>
    </template>
  </el-dialog>
   <el-dialog title="编辑参数" v-model="state.editArrOnlydirlog" >
    <el-form :model="state.editArrOnlyFrom" :label-width="state.formLabelWidth" ref="editArrOnlyFrom" >
      <el-form-item label="说明"  >
        <el-input v-model="state.editArrOnlyFrom.shuoming" autocomplete="off" :disabled="true"></el-input>
      </el-form-item>
      
      <el-form-item label="属性名"  prop="attr_name" :label-width="state.formLabelWidth"
      :rules="[{required:true,message:'请输入属性名',trigger:'blur' }]">
        <el-input v-model="state.editArrOnlyFrom.attr_name" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="state.editArrOnlydirlog = false">取消</el-button>
        <el-button type="primary" @click="editAttrOnlyFn">确定</el-button
        >
      </span>
    </template>
  </el-dialog>
  </el-main>
</template>
<script>
import { defineComponent, onMounted, reactive, toRefs,ref ,getCurrentInstance,nextTick} from 'vue'
import { getCate,getParams,addParams,delectParams,editParams} from "../../http/api.js";

export default defineComponent({
  setup(){
    const { proxy } = getCurrentInstance();
    const state=reactive({
      options:[],
      selsect:[],
      tableData:[],
      onlyTableData:[],
      tabs:'',
      formLabelWidth:'64px',
      addAttrMonydirlog:false,
      addAttrMonyFrom:{
        cat_id:'',
        attr_name:'',
        attr_vals:'',
        shuoming:'添加多个以逗号分隔',
        attr_sel:'many'
      },
      addAttrOnlydirlog:false,
      addAttrOnlyFrom:{
        cat_id:'',
        attr_name:'',
        shuoming:'添加多个以逗号分隔',
        attr_sel:'only'
      },
      editAttrMonydirlog:false,
      editAttrMonyFrom:{
        shuoming:'添加多个以逗号分隔',
        attr_vals:'',
        attr_name:'',
        attr_id:'',
        cat_id:'',
        attr_sel:''
      },
      editArrOnlydirlog:false,
      editArrOnlyFrom:{
        shuoming:'添加多个以逗号分隔',
        attr_id:'',
        attr_name:'',
        attr_sel:'',
        cat_id:'',
      }
    })
    const defaultCate = reactive({
      label: "cat_name",
      children: "children",
      value: "cat_id",
    });
   var inputVisible=ref(false);
   var inputValue=ref('')
    const cateChanged = async() => {
      if (state.selsect.length !== 3) {
        state.selsect = [];
        return;
      }
      var res=await getParams(state.selsect[2],{sel:'many'})
        res.map((item)=>{
          item.attr_vals=item.attr_vals.split(',');
          item.inputVisible=false;
          item.inputValue='';
          return item;
        })
        console.log(res)
        state.tableData=res;
    },
    //删除参数
    handleClose=(obj,index)=>{
      obj.attr_vals.splice(index,1)
      editParams(obj.cat_id,obj.attr_id,{
        attr_name:obj.attr_name,
        attr_vals:obj.attr_vals.join(','),
        attr_sel:obj.attr_sel})
    },
    // handleInputConfirm=(obj)=>{
    //   if(inputValue.value!=''){
    //     obj.attr_vals.push(inputValue.value) 
    //   editParams(obj.cat_id,obj.attr_id,{
    //     attr_name:obj.attr_name,
    //     attr_vals:obj.attr_vals.join(','),
    //     attr_sel:obj.attr_sel})
    //     inputVisible = false;
    //     inputValue.value = '';
    //   }else{
    //     inputVisible = false;
    //     inputValue.value = '';
    //   }
       
    // },
    // showInput=(obj)=>{
    //   obj.inputVisible = true;
    //   console.log(proxy)
    //     nextTick(_ => {
    //       console.log(proxy)
    //       proxy.$refs.saveTagInput.$refs.input.focus();
    //     });
    // },
    //删除属性
    deleteAttr=(id,aid)=>{
      delectParams(id,aid);
      cateChanged();
      handleClick();
    },
    handleClick=async()=>{
      if(state.tabs=="1"){
        var res=await getParams(state.selsect[2],{sel:'only'})
        state.onlyTableData=res;
      }
    },
    //添加动态参数
    addAttrMony=()=>{
      state.addAttrMonydirlog=true;
    },
    addAttrMonyFn=async()=>{
      const {attr_name,attr_vals,attr_sel}=state.addAttrMonyFrom;
      await addParams(state.selsect[2],{attr_name,attr_sel,attr_vals});
      state.addAttrMonydirlog=false;
      cateChanged();
    },
    //添加静态参数
    addAttrOnly=()=>{
      state.addAttrOnlydirlog=true;
    },
    addAttrOnlyFn=async()=>{
      const {attr_name,attr_sel}=state.addAttrOnlyFrom;
      await addParams(state.selsect[2],{attr_name,attr_sel});
      state.addAttrOnlydirlog=false;
      handleClick();
    },
    //编辑动态参数
    editAttrMony=(obj)=>{
      var a=JSON.parse(JSON.stringify(obj))
      state.editAttrMonydirlog=true;
      console.log(a)
      state.editAttrMonyFrom.attr_name=a.attr_name;
      state.editAttrMonyFrom.attr_id=a.attr_id;
      state.editAttrMonyFrom.cat_id=a.cat_id;
      state.editAttrMonyFrom.attr_sel=a.attr_sel;
      state.editAttrMonyFrom.attr_vals=a.attr_vals.join(',');
    },
    editAttrMonyFn=()=>{
      const {cat_id,attr_id,attr_vals,attr_sel,attr_name}=state.editAttrMonyFrom;
      editParams(cat_id,attr_id,{attr_vals,attr_sel:attr_sel,attr_name})
      state.editAttrMonydirlog=false;
      proxy.$refs.editAttrMonyFrom.resetFields();
      cateChanged();
    },
    //编辑静态参数
    editAttrOnly=(obj)=>{
      var a=JSON.parse(JSON.stringify(obj));
      state.editArrOnlydirlog=true;
      const {attr_id,attr_name,attr_sel,cat_id}=a;
      state.editArrOnlyFrom.attr_id=attr_id;
      state.editArrOnlyFrom.attr_name=attr_name;
      state.editArrOnlyFrom.attr_sel=attr_sel;
      state.editArrOnlyFrom.cat_id=cat_id;
    },
    editAttrOnlyFn=()=>{
      const {attr_id,attr_name,attr_sel,cat_id}=state.editArrOnlyFrom;
       editParams(cat_id,attr_id,{attr_sel:attr_sel,attr_name})
      state.editArrOnlydirlog=false;
      proxy.$refs.editArrOnlyFrom.resetFields();
      handleClick();
    }
    onMounted(async()=>{
      var res=await getCate({type:3});
      state.options=res;
    })
    return {state,defaultCate,inputVisible,inputValue,
    cateChanged,handleClose,deleteAttr,handleClick,addAttrMony,addAttrMonyFn,
    addAttrOnly,addAttrOnlyFn,editAttrMony,editAttrMonyFn,editAttrOnly,editAttrOnlyFn}
  },
  methods: {
    showInput(obj) {
      this.inputVisible = true;
      
      var a=JSON.parse(JSON.stringify(obj))
      var b=JSON.parse(JSON.stringify(this.state.tableData))
      var index=b.findIndex(item=>{
        console.log(item)
       return item.attr_id==a.attr_id;
      })
      console.log(index)
      this.$nextTick((_) => {
        console.log(this.$refs)
        this.$refs.saveTagInput.$refs.input.focus();
      })

    },
    handleInputConfirm(obj){
      if(this.inputValue!=''){
        obj.attr_vals.push(this.inputValue) 
      editParams(obj.cat_id,obj.attr_id,{
        attr_name:obj.attr_name,
        attr_vals:obj.attr_vals.join(','),
        attr_sel:obj.attr_sel})
        this.inputVisible = false;
        this.inputValue = '';
      }else{
        this.inputVisible = false;
        this.inputValue = '';
      }
       
    },
  },
});
</script>
<style lang="scss" scoped>
.head{
  margin-top: 10px;
  margin-bottom: 20px;
}
</style>